/**
 * Copyright (c) 2008-2011 The Open Source Geospatial Foundation
 * 
 * Published under the BSD license.
 * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
 * of the license.
 */

/**
 * api: example[tree] Tree Nodes ---------- Create all kinds of tree nodes.
 */

var mapPanel, tree;
Ext.onReady(function() {
	var wmsurl = "http://31.146.171.38:8082/geoserver/cenn/wms";
	var gwcurl = "http://31.146.171.38:8082/geoserver/gwc/service/wms";
	gwcurl = wmsurl;
	var empty = new OpenLayers.Layer.WMS("Empty", wmsurl, {
		sphericalMercator : true,
		layers : "cenn:emptytbl",
		transparent : true,
		format : "image/png"
	}, {
		isBaseLayer : false,
		visibility : true,
		googlel : true
	});
	/*
	 * var Old2000000 = new OpenLayers.Layer.WMS( "Old 200 000", gwcurl, {
	 * sphericalMercator : true, layers : "Old2000000", transparent : true,
	 * format : "image/png" }, { isBaseLayer : false, visibility : false });
	 */
	var gphy = new OpenLayers.Layer.Google("Google Physical", {

		type : G_PHYSICAL_MAP,
		isBaseLayer : false,
		sphericalMercator : true,
		visibility : false,
		googlel : true
	});

	var gmap = new OpenLayers.Layer.Google("Google Streets", // the
	// default
	{
		isBaseLayer : false,
		sphericalMercator : true,
		visibility : false,
		googlel : true
	});
	var ghyb = new OpenLayers.Layer.Google("Google Hybrid", {
		type : G_HYBRID_MAP,
		isBaseLayer : false,
		sphericalMercator : true,
		visibility : false,
		googlel : true
	});
	var gsat = new OpenLayers.Layer.Google("Google Satellite", {
		type : G_SATELLITE_MAP,
		isBaseLayer : false,
		sphericalMercator : true,
		visibility : false,
		googlel : true,
		buffer : 0
	});
	// create a map panel with some layers that we will show in our layer tree
	// below.
	mapPanel = new GeoExt.MapPanel({
		border : true,
		region : "center",
		// we do not want all overlays, to try the OverlayLayerContainer
		map : new OpenLayers.Map({
			allOverlays : false
		}),
		center : [ 146.1569825, -41.6109735 ],
		zoom : 6,
		layers : [
				new OpenLayers.Layer.WMS("Global Imagery",
						"http://maps.opengeo.org/geowebcache/service/wms", {
							layers : "bluemarble"
						}, {
							buffer : 0,
							visibility : false
						}),
				new OpenLayers.Layer.WMS("Tasmania State Boundaries",
						"http://demo.opengeo.org/geoserver/wms", {
							layers : "topp:tasmania_state_boundaries"
						}, {
							buffer : 0
						}),
				gphy,
				gmap,
				ghyb,
				gsat,
				empty,
				// create a group layer (with several layers in the "layers"
				// param)
				// to show how the LayerParamLoader works
				new OpenLayers.Layer.WMS("Tasmania (Group Layer)",
						"http://demo.opengeo.org/geoserver/wms", {
							layers : [ "topp:tasmania_state_boundaries",
									"topp:tasmania_water_bodies",
									"topp:tasmania_cities",
									"topp:tasmania_roads" ],
							transparent : true,
							format : "image/gif"
						}, {
							isBaseLayer : false,
							buffer : 0,
							// exclude this layer from layer container nodes
							displayInLayerSwitcher : false,
							visibility : false
						}) ]
	});

	// create our own layer node UI class, using the TreeNodeUIEventMixin
	var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI,
			new GeoExt.tree.TreeNodeUIEventMixin());

	// using OpenLayers.Format.JSON to create a nice formatted string of the
	// configuration for editing it in the UI
	var treeConfig = [ {
		nodeType : "gx_baselayercontainer"
	}, {
		nodeType : "gx_layercontainer",
		expanded : true,
		text : "Mai1n",
		// render the nodes inside this container with a radio button,
		// and assign them the group "foo".
		loader : {
			filter : function(record) {
				var isGoogle = record.get("layer").googlel;
				return isGoogle;
			},
			baseAttrs : {
				radioGroup : "foo",
				uiProvider : "layernodeui"
			}
		}
	}, {
		nodeType : "gx_layer",
		layer : "Tasmania (Group Layer)",
		isLeaf : false,
		// create subnodes for the layers in the LAYERS param. If we assign
		// a loader to a LayerNode and do not provide a loader class, a
		// LayerParamLoader will be assumed.
		loader : {
			param : "LAYERS"
		}
	} ];
	// The line below is only needed for this example, because we want to allow
	// interactive modifications of the tree configuration using the
	// "Show/Edit Tree Config" button. Don't use this line in your code.
	treeConfig = new OpenLayers.Format.JSON().write(treeConfig, true);

	// create the tree with the configuration from above
	tree = new Ext.tree.TreePanel({
		border : true,
		region : "west",
		title : "Layers",
		width : 200,
		split : true,
		collapsible : true,
		collapseMode : "mini",
		autoScroll : true,
		plugins : [ new GeoExt.plugins.TreeNodeRadioButton({
			listeners : {
				"radiochange" : function(node) {
					alert(node.text + " is now the active layer.");
				}
			}
		}) ],
		loader : new Ext.tree.TreeLoader({
			// applyLoader has to be set to false to not interfer with loaders
			// of nodes further down the tree hierarchy
			applyLoader : false,
			uiProviders : {
				"layernodeui" : LayerNodeUI
			}
		}),
		root : {
			nodeType : "async",
			// the children property of an Ext.tree.AsyncTreeNode is used to
			// provide an initial set of layer nodes. We use the treeConfig
			// from above, that we created with OpenLayers.Format.JSON.write.
			children : Ext.decode(treeConfig)
		// Don't use the line above in your application. Instead, use
		// children: treeConfig

		},
		rootVisible : false,
		lines : false,
		bbar : [ {
			text : "Show/Edit Tree Config",
			handler : function() {
				treeConfigWin.show();
				Ext.getCmp("treeconfig").setValue(treeConfig);
			}
		} ]
	});

	// dialog for editing the tree configuration
	var treeConfigWin = new Ext.Window({
		layout : "fit",
		hideBorders : true,
		closeAction : "hide",
		width : 300,
		height : 400,
		title : "Tree Configuration",
		items : [ {
			xtype : "form",
			layout : "fit",
			items : [ {
				id : "treeconfig",
				xtype : "textarea"
			} ],
			buttons : [ {
				text : "Save",
				handler : function() {
					var value = Ext.getCmp("treeconfig").getValue()
					try {
						var root = tree.getRootNode();
						root.attributes.children = Ext.decode(value);
						tree.getLoader().load(root);
					} catch (e) {
						alert("Invalid JSON");
						return;
					}
					treeConfig = value;
					treeConfigWin.hide();
				}
			}, {
				text : "Cancel",
				handler : function() {
					treeConfigWin.hide();
				}
			} ]
		} ]
	});

	new Ext.Viewport({
		layout : "fit",
		hideBorders : true,
		items : {
			layout : "border",
			deferredRender : false,
			items : [ mapPanel, tree, {
				contentEl : "desc",
				region : "east",
				bodyStyle : {
					"padding" : "5px"
				},
				collapsible : true,
				collapseMode : "mini",
				split : true,
				width : 200,
				title : "Description"
			} ]
		}
	});
});